<template>
	<div class="portFluxBox">
		<div class="portBox" v-for="item in tableData">
			<div v-if="item.phy == 'up' || item.phy == 'UP'">
				<img src="../../../../assets/img/port_up.png" alt="UP" style="width: 80px;height: 80px;" title="UP">
			</div>
			<div v-if="item.phy == 'down' || item.phy == 'DOWN'">
				<img src="../../../../assets/img/port_down.png" alt="DOWN" style="width: 80px;height: 80px;" title="DOWN">
			</div>
			<div class="portName" :title="item.ifname">
				{{item.ifname}}
			</div>
		</div>
		<!-- <el-row class="table-box">
            <el-col :span="24">
                <el-row :gutter="0" class="tableData-box">
                    <el-col :span="24">
                        <el-table
                            :header-cell-style="{
                                'background':'rgb(2, 16, 51)',
                                'border-bottom': 'none',
                                'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset',
                                'text-align': 'center',
                                'color': 'aliceblue' }"
                            :cell-style="{
                                'background':'rgba(2, 16, 51, 0)',
                                'border-top': '1px solid rgba(4, 44, 119, 0.5)',
                                'border-bottom': 'none',
                                'text-align': 'center',
                                'color': 'aliceblue' }"
                            :data="tableData"
                            height="100%"
                            style="width: 100%; font-size: medium">
                                <template v-for="(item) in tableColumns">
                                <el-table-column
                                    :prop="item.prop"
                                    :label="item.label"
                                    align="center"
                                    :width="item.width"
                                    :key="item.prop">
                                    <template v-slot="scope">
                                        <template v-if="item.format == 'STATUS'">
                                            <div v-if="scope.row[item.prop] == 'up' || scope.row[item.prop] == 'UP'">
                                                <el-tooltip content="UP" placement="left" effect="light">
                                                    <i class="el-icon-bangzhu" style="color:#4CB51E"></i>
                                                </el-tooltip>
                                                
                                            </div>
                                            <div v-else>
                                                <el-tooltip content="DOWN" placement="left" effect="light">
                                                    <i class="el-icon-bangzhu" style="color:red"></i>
                                                </el-tooltip>    
                                            </div>
                                        </template>
                                        <template v-else>
                                           {{scope.row[item.prop]}}
                                        </template>
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row> -->
	</div>
</template>

<script>
	import {
		getJavaServerData
	} from '@/api/index.js';
	import bus from 'common/bus.js';
	import tableColumns from './PortFluxForSSHTableColumns.js';

	export default {
		components: {

		},
		data() {
			return {
				postData: {
					opera: 'OSNetworkIfSpeed',
					curPage: 1,
					pageSize: 10,
					sort: {
						sortColumn: 'rtx_kbyte',
						sortOrders: 'desc'
					},
					filtersType: 'fuzzyquery',
					filters: {
						"monid": "",
					},
				},
				tableData: [],
				tableColumns: tableColumns,
				selectedMonID: '',
				timerName: 'PortFlux',
				timerEventName: 'timerPortFlux',
				timerInterval: 1000 * 30
			}
		},
		created() {
			bus.$on('selectedNetMonID', msg => {
				// 获取数据
				this.selectedMonID = msg;
				this.postData.filters.monid = this.selectedMonID.selectedNETMonID;
				this.getData();
			});

			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});

			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					this.getData();
				}
			});
		},
		mounted() {

		},
		computed: {

		},
		methods: {
			getData() {
				getJavaServerData('/Sp/networkportinfo', {
					hid: this.postData.filters.monid
				}).then((res) => {
					if (res.length == 0) {
						this.tableData = [];
					} else {
						this.tableData = res;
						console.log(123, res)
					}
				});
			},
		},
		beforeDestroy() {
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});

		},
		watch: {

		}
	}
</script>

<style scoped>
	.portFluxBox {
		height: calc(70vh - 22px - 8px);
		min-height:730px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		overflow-y: scroll;
	}



	::-webkit-scrollbar {
		/*滚动条整体样式*/
		width: 4px;
		/*高宽分别对应横竖滚动条的尺寸*/
		height: 1px;
	}

	::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 10px;
		box-shadow: inset 0 0 5px #c283d5;
		background: #78b4b4;
	}

	::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
		border-radius: 10px;
		background: #ededed;
	}

	.portName {
		font-size: 14px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.portBox {
		width: 120px;
		height: 120px;
		border-radius: 10px;
		border: solid 1px #c283d5;
		margin: 10px 14px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.table-box {
		height: 100%;
		/* height: calc(70% - 10px); */
		/* border-top: 1px solid rgba(4, 44, 119, 0.5); */
	}

	.table-box>.el-col {
		height: 100%;
	}

	.table-box .tableTitle {
		height: 30px;
		text-align: center;
		line-height: 30px;
	}

	.table-box .tableTitle .titleText {
		display: block;
		width: 60%;
		margin: 0 auto 8px auto;
		border-radius: 20px;
		box-shadow: 0px 0px 20px rgb(1, 40, 107) inset !important;
		line-height: 22px;
	}

	.table-box .tableData-box {
		height: calc(100% - 30px);
	}

	.tableData-box>.el-col {
		height: 100%;
	}

	/* 滚动条 */
	.tableData-box>>>.el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.tableData-box>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
		border-radius: 3px;
		background-color: rgba(4, 44, 119, 0.7);
	}

	.tableData-box>>>.el-table th.gutter {
		display: none;
	}

	.tableData-box>>>.el-table tr {
		background-color: rgba(1, 40, 107, 0) !important;
	}

	.tableData-box>>>.el-table {
		background: rgba(2, 16, 51, 0);
	}

	.el-table__row>td {
		border: none;
	}

	.el-table::before {
		height: 0px;
	}
</style>
